import getComponentRootDom from "@/utils/getComponentRootDom";
import Icon from "@/components/Icon";
import styles from './message.module.less'

/**
 * 弹出消息
 * @param {Object} options 配置项 {content: 消息内容, type: 消息类型[info,error,success,warn], duration: 多久后消失, container{HTMLElement}: 容器，消息会显示到该容器的正中；如果不传，则显示到页面正中}
 */
const message = function (options = {}) {
    const content = options.content || ''
    const duration = options.duration || 2000
    const type = options.type || 'info'
    const container = options.container || document.body
    // 创建消息元素
    const div = document.createElement('div')
    const iconDom = getComponentRootDom(Icon, { type })
    div.innerHTML = `<span class="${styles.icon}">${iconDom.outerHTML}</span><div>${content}</div>`
    // 设置样式
    const typeClassName = styles[`message-${type}`]
    div.className = `${styles.message} ${typeClassName}`
    // 将div加入到容器中
    // 判断容器的position是否改动过
    if (getComputedStyle(container).position === 'static') {
        if (container.tagName === 'BODY') {
            container.style.position = ''
        }else {
            container.style.position = 'relative'
        }
    }
    container.appendChild(div)
    // 浏览器强行渲染
    div.clientHeight; // 导致reflow
    // 回归正常位置
    div.style.opacity = 1
    div.style.transform = 'translate(-50%, -50%)'
    // 自动消失
    setTimeout(() => {
        div.style.opacity = 0
        div.style.transform = 'translate(-50%, -50%) translateY(-25px)'
        div.addEventListener('transitionend', () => {
            div.remove()
            // 运行回调函数
            options.callback && options.callback();
        }, { once: true })
    }, duration)
}

export default message